<template>
  <div class="app-container">
    <el-form ref="QueryForm" :inline="true" label-width="120px" :model="QueryForm">
      <div class="topleft">
        <el-form-item label="项目名称：" label-width="100px" style="width: 300px; float: left" prop="AppProject_Id">
          <!-- <el-select
            v-model="QueryForm.AppProject_Id"
            clearable
            placeholder="请输入项目名称"
          >
            <el-option
              v-for="item in Projects"
              :key="item.id"
              :label="item.projectName"
              :value="item.id"
            ></el-option>
          </el-select> -->
          <el-autocomplete class="inline-input" v-model="projectsname" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>
        </el-form-item>
        <el-form-item label="用户帐号名称：" label-width="120px" style="width: 340px; float: left" prop="UserId">
          <el-autocomplete v-model="BaseUserId" clearable :fetch-suggestions="querySearchAsync" placeholder="请输入用户帐号名称" @input="chaUserId"> </el-autocomplete>
        </el-form-item>
      </div>
      <div class="topmid">
        <el-form-item label="机器名称：" label-width="100px" style="width: 300px; float: left" prop="MchName">
          <el-input v-model="QueryForm.MchName" placeholder="请输入机器名称"></el-input>
        </el-form-item>
        <el-form-item label="APP升级时间：" label-width="120px" style="float: left">
          <el-date-picker style="float: left; width: 46%" v-model="QueryForm.app_starttime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable type="datetime" placeholder="请选择开始时间"> </el-date-picker>
          <div style="float: left; margin: 0 10px">至</div>
          <el-date-picker style="float: left; width: 46%" v-model="QueryForm.app_endtime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable type="datetime" placeholder="请选择结束时间"> </el-date-picker>
        </el-form-item>
        <el-form-item label="守护升级时间：" label-width="120px" style="float: left">
          <el-date-picker style="float: left; width: 46%" v-model="QueryForm.daemon_starttime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable type="datetime" placeholder="请选择开始时间"> </el-date-picker>
          <div style="float: left; margin: 0 10px">至</div>
          <el-date-picker style="float: left; width: 46%" v-model="QueryForm.daemon_endtime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable type="datetime" placeholder="请选择结束时间"> </el-date-picker>
        </el-form-item>
      </div>
      <div class="topright">
        <el-form-item label="机器SN：" prop="SN" label-width="100px" style="width: 300px; float: left">
          <el-input v-model="QueryForm.SN" placeholder="请输入机器SN"></el-input>
        </el-form-item>
        <el-form-item label="APP升级状态：" label-width="120px" style="width: 340px; float: left" prop="app_updateState">
          <el-select v-model="QueryForm.app_updateState" clearable placeholder="请选择APP升级状态">
            <el-option label="升级成功" value="1"></el-option>
            <el-option label="升级失败" value="10"></el-option>
            <el-option label="主程序损坏" value="11"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="120px" style="width: 340px; float: left" label="守护升级状态：" prop="Daemon_updateState">
          <el-select v-model="QueryForm.Daemon_updateState" clearable placeholder="请选择守护升级状态">
            <el-option label="升级成功" value="1"></el-option>
            <el-option label="升级失败" value="10"></el-option>
            <el-option label="主程序损坏" value="11"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="120px" style="float: left" label="主程序是否在线">
          <el-select style="width: 160px" v-model="QueryForm.isonline" clearable placeholder="请选择主程序状态">
            <el-option label="在线" value="true"></el-option>
            <el-option label="离线" value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="128px" style="float: left" label=" 守护程序是否在线">
          <el-select style="width: 160px" v-model="QueryForm.daemon_isonline" clearable placeholder="请选择守护程序状态">
            <el-option label="在线" value="true"></el-option>
            <el-option label="离线" value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主程序版本：" label-width="100px" style="width: 300px; float: left">
          <el-input v-model="QueryForm.app_version" placeholder="请输入主程序版本"></el-input>
        </el-form-item>
        <el-form-item label="守护程序版本：" label-width="120px" style="width: 320px; float: left">
          <el-input v-model="QueryForm.daemon_version" placeholder="请输入守护程序版本"></el-input>
        </el-form-item>
      </div>
      <el-form-item label-width="100px" style="width: 300px; float: left" class="formbtn">
        <el-button type="primary" @click="upapp()">升级APP</el-button>
        <el-button type="primary" @click="upDaemon()">升级守护</el-button>
        <el-button type="primary" @click="Query('search')">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table header-cell-class-name="tableheader" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" v-loading="Loading" border fit element-loading-text="加载中···" highlight-current-row class="lefttable" :data="list" tooltip-effect="dark" style="width: 100%; min-height: 0" @selection-change="SelectionChange">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="projectName" label="项目名称" width="120"> </el-table-column>
      <el-table-column prop="name" label="机器名称" width="120"> </el-table-column>
      <el-table-column prop="sn" label="机器SN" width="120"> </el-table-column>
      <el-table-column prop="userName" label="用户账号" width="120"> </el-table-column>
      <el-table-column label="主程序是否在线" width="100">
        <template slot-scope="scope">
          <span style="color: green" v-if="scope.row.isOnLine === true">在线</span>
          <span style="color: #b9b9b9" v-else>离线</span>
        </template>
      </el-table-column>
      <el-table-column label="守护程序是否在线" width="100">
        <template slot-scope="scope">
          <span style="color: green" v-if="scope.row.daemon_IsOnline === true">在线</span>
          <span style="color: #b9b9b9" v-else>离线</span>
        </template>
      </el-table-column>
      <el-table-column prop="app_lastupdatesuccess_time" label="APP最后一次成功升级时间" width="160"> </el-table-column>
      <el-table-column prop="app_lastupdate_time" label="APP最近的升级时间" width="160"> </el-table-column>
      <el-table-column label="APP升级状态" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.app_updateState === 1">升级成功</span>
          <span v-if="scope.row.app_updateState === 10">升级失败</span>
          <span v-if="scope.row.app_updateState === 11">程序损坏</span>
        </template>
      </el-table-column>
      <el-table-column prop="app_Version" label="APP版本" width="100"> </el-table-column>
      <el-table-column prop="daemon_lastupdatesuccess_time" label="守护最后一次成功升级时间" width="160"> </el-table-column>
      <el-table-column prop="daemon_lastupdate_time" label="守护最近的升级时间" width="160"> </el-table-column>
      <el-table-column label="守护升级状态" width="110">
        <template slot-scope="scope">
          <span v-if="scope.row.daemon_updateState === 1">升级成功</span>
          <span v-if="scope.row.daemon_updateState === 10">升级失败</span>
          <span v-if="scope.row.daemon_updateState === 11">程序损坏</span>
        </template>
      </el-table-column>
      <el-table-column prop="daemon_Version" label="守护版本" width="120"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="primary" size="small">上传信息详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="" @close="closeupdialog" :visible.sync="updialog" :append-to-body="true" :close-on-click-modal="false" width="70%">
      <div class="clearfix">
        <div style="width: 48%; float: left">
          <el-form ref="dialogForm" :rules="dialogrule" label-width="120px" :model="dialogForm" class="topform">
            <el-form-item label="项目名称：" prop="AppProject_Id">

              <el-select filterable v-if="ifsh===false" v-model="dialogForm.AppProject_Id" clearable placeholder="请输入项目名称" @change="chaAppProject">
                <el-option v-for="item in Projects" :key="item.id" :label="item.projectName" :value="item.id">
                </el-option>
              </el-select>
              <el-select v-else v-model="dialogForm.AppProject_Id" placeholder="请输入项目名称" @change="chaAppProject">
                <el-option v-for="item in ProjectsSH" :key="item.id" :label="item.projectName" :value="item.id">
                </el-option>
              </el-select>

            </el-form-item>
            <el-form-item label="APP名称：" prop="new_Name">
              <el-input disabled v-model="dialogForm.new_Name"></el-input>
            </el-form-item>
            <el-form-item label="版本号：" prop="new_Version">
              <el-input disabled v-model="dialogForm.new_Version"></el-input>
            </el-form-item>
            <el-form-item label="升级备注：" prop="remark">
              <el-input v-model="dialogForm.remark"></el-input>
            </el-form-item>
            <el-form-item style="margin: 0" label="是否定时升级：" prop="Is_Timing">
              <el-switch v-model="dialogForm.Is_Timing" active-text="定时升级" inactive-text="立即升级"> </el-switch>
            </el-form-item>
            <el-form-item style="margin-top: 22px" v-if="dialogForm.Is_Timing === true" label="定时升级时间：" prop="Upgrade_Time">
              <el-date-picker v-model="dialogForm.Upgrade_Time" type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" clearable placeholder="选择日期时间"> </el-date-picker>
            </el-form-item>
            <p v-else>立即升级是5分钟后开始升级。</p>
            <el-form-item v-if="ifsh===false" label="是否强制升级：" prop="IsForce">
              <el-switch v-model="dialogForm.IsForce"></el-switch>
            </el-form-item>
          </el-form>
          <div style="width: fit-content; margin: 0 auto">
            <el-button type="danger" @click="closeupdialog">取消</el-button>
            <el-button type="primary" @click="updialogbtn">保存</el-button>
          </div>
        </div>
        <div style="width: 50%; float: right">
          <p style="width: 90%">
            <span style="float: left">升级机器列表</span><span style="float: right">机器数量：{{ dialoglist.length }}</span>
          </p>
          <el-table header-cell-class-name="tableheader" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" v-loading="Loading" border fit element-loading-text="加载中···" highlight-current-row class="lefttable" stripe :data="dialoglist" tooltip-effect="dark" style="width: 100%">
            <el-table-column prop="projectName" label="项目名称"> </el-table-column>
            <el-table-column prop="name" label="机器名称"> </el-table-column>
            <el-table-column prop="sn" label="机器SN"> </el-table-column>
            <el-table-column prop="userName" label="用户账号"> </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
    <div class="pagination">
      <el-pagination style="text-align: center" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="QueryForm.page" :page-sizes="[10,20,50,100,500]" :page-size="QueryForm.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
  </div>
</template>
<style></style>
<script>
  export default {
    activated() {
      this.Query();
      this.getProjects();
    },
    created: function () {
      this.Query();
      this.getProjects();
    },
    data: function () {
      return {
        Loading: true,
        Projects: [],
        projectsname: "", //项目名称的输入
        list: [],
        total: 0,
        QueryForm: {
          isonline: "",
          daemon_isonline: "",
          app_version: "",
          daemon_version: "",
          AppProject_Id: "",
          MchName: "",
          SN: "",
          UserId: "",
          app_updateState: "",
          Daemon_updateState: "",
          app_starttime: "",
          app_endtime: "",
          daemon_starttime: "",
          daemon_endtime: "",
          IsPage: true,
          page: 1,
          pagesize: 10,
        },
        dialogForm: {
          AppProject_Id: "",
          new_Name: "",
          new_Version: "",
          remark: "",
          AppProject_Version_Id: "",
          Is_Timing: false,
          Upgrade_Time: "",
          Mchids: [],
          IsForce: false,
        },
        dialoglist: [],
        dialogrule: {
          AppProject_Id: [
          {
            required: true,
            message: "此项为必填项",
          }, ],
          new_Name: [
          {
            required: true,
            message: "此项为必填项",
          }, ],
          new_Version: [
          {
            required: true,
            message: "此项为必填项",
          }, ],
          remark: [
          {
            required: true,
            message: "此项为必填项",
          }, ],
          Is_Timing: [
          {
            required: true,
            message: "此项为必填项",
          }, ],
          Upgrade_Time: [
          {
            required: true,
            message: "此项为必填项",
          }, ],
          IsForce: [
          {
            required: true,
            message: "此项为必填项",
          }, ],
        },
        updialog: false,
        ifsh: false,
        alluser: [],
        BaseUserId: "",
        ProjectsSH: [], //守护列表
      };
    },
    methods: {
      // 项目名称输入
      querySearch(queryString, cb) {
        let arr = [];
        arr = this.Projects;
        arr.forEach((item) => {
          item.value = item.projectName;
        });
        var restaurants = arr;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0;
        };
      },
      handleSelect(item) {
        this.QueryForm.AppProject_Id = item.id;
      },
      // 用户帐号名称输入

      chaUserId(item) {
        if (item.length === 0) {
          this.QueryForm.UserId = "";
        } else {
          for (var i in this.alluser) {
            if (this.alluser[i].UserName === item) {
              this.QueryForm.UserId = this.alluser[i].BaseUserId;
            }
          }
        }
      },
      getProjects() {
        this.$pcpost(this.$master + "/AppUpdate/Get_AppProject_List").then((d) => {
          this.Projects = d.data.rows;
          d.data.rows.forEach((one) => {
            if (one.id.indexOf('SH') >= 0) {
              this.ProjectsSH.push(one)
            }
          })
          console.log(this.ProjectsSH)
        });
      },
      Query(msg) {
        if (msg == "search") {
          this.QueryForm.page = 1;
        }
        this.$pcpost(this.$master + "/AppUpdate/Get_Mch_List", this.QueryForm, true).then((d) => {
          this.Loading = false;
          this.list = d.data.rows;
          this.sum = d.data.sum;
          this.total = d.data.total;
        });
      },
      querySearchAsync(queryString, callback) {
        this.$pcpost(this.$master + "/Admin/UserMana/GetAllUser", {
          query: queryString,
        }).then((data) => {
          var list = [{}];
          for (let i of data.data.rows) {
            i.value = i.UserName;
          }
          list = data.data.rows;
          this.alluser = list;
          callback(list);
        });
      },
      closeupdialog() {
        this.updialog = false;
        this.dialogForm = {
          AppProject_Id: "",
          new_Name: "",
          new_Version: "",
          remark: "",
          AppProject_Version_Id: "",
          Is_Timing: false,
          Upgrade_Time: "",
          Mchids: [],
          IsForce: false,
        };
      },
      upapp() {
        this.ifsh = false;
        if (this.dialoglist.length >= 1) {
          this.updialog = true;
        } else {
          this.$notify.error({
            title: "提示",
            message: "请先选择机器",
          });
        }
      },
      upDaemon() {
        this.ifsh = true;
        if (this.dialoglist.length >= 1) {
          this.updialog = true;
          this.chaAppProject("SH");
          this.dialogForm.AppProject_Id = "SH";
        } else {
          this.$notify.error({
            title: "提示",
            message: "请先选择机器",
          });
        }
      },
      chaAppProject(val) {
        for (var i in this.Projects) {
          if (this.Projects[i].id === val) {
            this.dialogForm.new_Name = this.Projects[i].new_Name;
            this.dialogForm.new_Version = this.Projects[i].new_Version;
            this.dialogForm.AppProject_Version_Id = this.Projects[i].version_Id;
          }
        }
      },
      SelectionChange(val) {
        this.dialoglist = val;
      },
      updialogbtn() {
        this.$refs["dialogForm"].validate((valid) => {
          if (valid) {
            for (var i in this.dialoglist) {
              this.dialogForm.Mchids.push(this.dialoglist[i].id);
            }
            this.$pcpost(this.$master + "/AppUpdate/Save_AppUpdate_Task", {
              AppProject_Id: this.dialogForm.AppProject_Id,
              remark: this.dialogForm.remark,
              AppProject_Version_Id: this.dialogForm.AppProject_Version_Id,
              Is_Timing: this.dialogForm.Is_Timing,
              Upgrade_Time: this.dialogForm.Upgrade_Time,
              Mchids: this.dialogForm.Mchids,
              IsForce: this.dialogForm.IsForce,
            }).then((data) => {
              if (data.code === 0) {
                this.updialog = false;
                this.dialogForm = {
                  AppProject_Id: "",
                  AppProject_Version_Id: "",
                  Is_Timing: false,
                  Upgrade_Time: "",
                  Mchids: [],
                  IsForce: false,
                };
                this.Query();
                this.$notify.success({
                  title: "成功",
                  message: data.msg,
                });
              } else {
                this.$notify.error({
                  title: "错误",
                  message: data.msg,
                });
              }
            });
          }
        });
      },
      handleSizeChange(v) {
        this.QueryForm.pagesize = v;
        this.Query();
      },
      handleCurrentChange(v) {
        this.QueryForm.page = v;
        this.Query();
      },
    },
  };
</script>